<template>
	<div>
		<div v-show="reportCata=='pac'">
			<div style="display: flex;margin-bottom: 30px;justify-content: space-between; width: 1250px;">
				<div class="bg" style="height: 260px;position: relative;width: 610px;">
					<div style="text-align: center;">
						1#投加泵
					</div>
					<div style="display: flex;padding: 20px 10px;">
						<div style="display: flex;width: 260px;justify-content: space-around;">
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东进水流量
									</div>
									<div class="bottom-section">
										{{latestPacRecord.FIT103_2_5_H||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西进水流量
									</div>
									<div class="bottom-section">
										{{latestPacRecord.FIT103_1_5_H||'--'}}
									</div>
								</div>

								<div class="box">
									<div class="top-section">
										出水流量
									</div>
									<div class="bottom-section">
										{{latestPacRecord.CS_LJ_FIT_H||'--'}}
									</div>
								</div>

							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东二PO43-
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y104_2PO1_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西二PO43-
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y104_1PO1_V_PV||'--'}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										气浮PO43-
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y105_PO_V_PV||'--'}}
									</div>
								</div>


							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东二SS
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y104_2SS1_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西二SS
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y104_1SS1_V_PV||'--'}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										气浮SS
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y105_SS_V_PV||'--'}}
									</div>
								</div>
							</div>
							<div
								style="position: absolute;bottom: 10px;font-size: 12px;color: #007bff;text-align: center;">
								<div>算法建议</div>
								<div style="color: #FFF;height: 20px;">
									{{Number(latestPacRecord.Ai_1_PAC_DOSAGE_1).toFixed(2)||'--'}}
								</div>
							</div>

						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon">
									泵图
								</div>

							</div>

						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon2">
									流量计
								</div>
								<div
									style="position: absolute;bottom: 70px;font-size: 12px;color: #007bff;text-align: center;">
									<div>当前数值</div>
									<div style="color: #FFF;height: 20px;">{{Number(latestPacRecord.ll1).toFixed(2)||'--'}}</div>
								</div>
							</div>
						</div>
						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuShuichi">
								气浮池
							</div>
						</div>
					</div>
				</div>
				<div class="bg" style="height: 260px;position: relative;width: 610px;">
					<div style="text-align: center;">
						2#投加泵
					</div>
					<div style="display: flex;padding: 20px 10px;">
						<div style="display: flex;width: 260px;justify-content: space-around;">
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东进水流量
									</div>
									<div class="bottom-section">
										{{latestPacRecord.FIT103_2_5_H||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西进水流量
									</div>
									<div class="bottom-section">
										{{latestPacRecord.FIT103_1_5_H||'--'}}
									</div>
								</div>

								<div class="box">
									<div class="top-section">
										出水流量
									</div>
									<div class="bottom-section">
										{{latestPacRecord.CS_LJ_FIT_H||'--'}}
									</div>
								</div>

							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东二PO43-
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y104_2PO1_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西二PO43-
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y104_1PO1_V_PV||'--'}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										气浮PO43-
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y105_PO_V_PV||'--'}}
									</div>
								</div>


							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东二SS
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y104_2SS1_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西二SS
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y104_1SS1_V_PV||'--'}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										气浮SS
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y105_SS_V_PV||'--'}}
									</div>
								</div>
							</div>
							<div
								style="position: absolute;bottom: 10px;font-size: 12px;color: #007bff;text-align: center;">
								<div>算法建议</div>
								<div style="color: #FFF;height: 20px;">
									{{Number(latestPacRecord.Ai_2_PAC_DOSAGE_1).toFixed(2)||'--'}}
								</div>
							</div>
						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon">
									泵图
								</div>
							</div>

						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon2">
									流量计
								</div>
								<div
									style="position: absolute;bottom: 70px;font-size: 12px;color: #007bff;text-align: center;">
									<div>当前数值</div>
									<div style="color: #FFF;height: 20px;">{{Number(latestPacRecord.ll2).toFixed(2)||'--'}}</div>
								</div>
							</div>
						</div>
						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuShuichi">
								气浮池
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="IconSetting" @click="handleClickSetting('pac')">

			</div>
			<div style="display: flex;margin-bottom: 30px;justify-content: space-between; width: 1250px;">
				<div class="bg" style="height: 260px;position: relative;width: 610px;">
					<div style="text-align: center;">
						3#投加泵
					</div>
					<div style="display: flex;padding: 20px 10px;">
						<div style="display: flex;width: 260px;justify-content: space-around;">
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东进水流量
									</div>
									<div class="bottom-section">
										{{latestPacRecord.FIT103_2_5_H||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西进水流量
									</div>
									<div class="bottom-section">
										{{latestPacRecord.FIT103_1_5_H||'--'}}
									</div>
								</div>

								<div class="box">
									<div class="top-section">
										出水流量
									</div>
									<div class="bottom-section">
										{{latestPacRecord.CS_LJ_FIT_H||'--'}}
									</div>
								</div>

							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东二PO43-
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y104_2PO1_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西二PO43-
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y104_1PO1_V_PV||'--'}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										气浮PO43-
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y105_PO_V_PV||'--'}}
									</div>
								</div>


							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东二SS
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y104_2SS1_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西二SS
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y104_1SS1_V_PV||'--'}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										气浮SS
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y105_SS_V_PV||'--'}}
									</div>
								</div>
							</div>
							<div
								style="position: absolute;bottom: 10px;font-size: 12px;color: #007bff;text-align: center;">
								<div>算法建议</div>
								<div style="color: #FFF;height: 20px;">
									{{Number(latestPacRecord.Ai_3_PAC_DOSAGE_1).toFixed(2)||'--'}}
								</div>
							</div>
						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon">
									泵图
								</div>

							</div>

						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon2">
									流量计
								</div>
								<div
									style="position: absolute;bottom: 70px;font-size: 12px;color: #007bff;text-align: center;">
									<div>当前数值</div>
									<div style="color: #FFF;height: 20px;">{{Number(latestPacRecord.ll3).toFixed(2)||'--'}}</div>
								</div>
							</div>
						</div>
						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuShuichi">
								气浮池
							</div>
						</div>
					</div>
				</div>
				<div class="bg" style="height: 260px;position: relative;width: 610px;">
					<div style="text-align: center;">
						4#投加泵
					</div>
					<div style="display: flex;padding: 20px 10px;">
						<div style="display: flex;width: 260px;justify-content: space-around;">
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东进水流量
									</div>
									<div class="bottom-section">
										{{latestPacRecord.FIT103_2_5_H||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西进水流量
									</div>
									<div class="bottom-section">
										{{latestPacRecord.FIT103_1_5_H||'--'}}
									</div>
								</div>

								<div class="box">
									<div class="top-section">
										出水流量
									</div>
									<div class="bottom-section">
										{{latestPacRecord.CS_LJ_FIT_H||'--'}}
									</div>
								</div>

							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东二PO43-
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y104_2PO1_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西二PO43-
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y104_1PO1_V_PV||'--'}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										气浮PO43-
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y105_PO_V_PV||'--'}}
									</div>
								</div>


							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东二SS
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y104_2SS1_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西二SS
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y104_1SS1_V_PV||'--'}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										气浮SS
									</div>
									<div class="bottom-section">
										{{latestPacRecord.Y105_SS_V_PV||'--'}}
									</div>
								</div>
							</div>

							<div
								style="position: absolute;bottom: 10px;font-size: 12px;color: #007bff;text-align: center;">
								<div>算法建议</div>
								<div style="color: #FFF;height: 20px;">
									{{Number(latestPacRecord.Ai_4_PAC_DOSAGE_1).toFixed(2)||'--'}}
								</div>
							</div>
						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon">
									泵图
								</div>
							</div>

						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon2">
									流量计
								</div>
								<div
									style="position: absolute;bottom: 70px;font-size: 12px;color: #007bff;text-align: center;">
									<div>当前数值</div>
									<div style="color: #FFF;height: 20px;">{{Number(latestPacRecord.ll4).toFixed(2)||'--'}}</div>
								</div>
							</div>
						</div>
						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuShuichi">
								气浮池
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div v-show="reportCata=='pam'">
			<div style="display: flex;margin-bottom: 30px;justify-content: space-between; width: 1250px;">
				<div class="bg" style="height: 260px;position: relative;width: 610px;">
					<div style="text-align: center;">
						1#投加泵
					</div>
					<div style="display: flex;padding: 20px 10px;">
						<div style="display: flex;width: 260px;justify-content: space-around;">
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东进水流量
									</div>
									<div class="bottom-section">
										{{latestPamRecord.FIT103_2_5_H||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西进水流量
									</div>
									<div class="bottom-section">
										{{latestPamRecord.FIT103_1_5_H||'--'}}
									</div>
								</div>

								<div class="box">
									<div class="top-section">
										出水流量
									</div>
									<div class="bottom-section">
										{{latestPamRecord.CS_LJ_FIT_H||'--'}}
									</div>
								</div>

							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东二SS
									</div>
									<div class="bottom-section">
										{{latestPamRecord.Y104_2SS1_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西二SS
									</div>
									<div class="bottom-section">
										{{latestPamRecord.Y104_1SS1_V_PV||'--'}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										气浮SS
									</div>
									<div class="bottom-section">
										{{latestPamRecord.Y105_SS_V_PV||'--'}}
									</div>
								</div>
							</div>

							<div
								style="position: absolute;bottom: 10px;font-size: 12px;color: #007bff;text-align: center;">
								<div>算法建议</div>
								<div style="color: #FFF;height: 20px;">
									{{Number(latestPamRecord.Ai_1_PAM_DOSAGE_QF).toFixed(2)||'--'}}
								</div>
							</div>
						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon">
									泵图
								</div>
							</div>

						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon2">
									流量计
								</div>
								<div
									style="position: absolute;bottom: 70px;font-size: 12px;color: #007bff;text-align: center;">
									<div>当前数值</div>
									<div style="color: #FFF;height: 20px;">{{Number(latestPamRecord.ll1).toFixed(2)||'--'}}</div>
								</div>
							</div>
						</div>
						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuShuichi">
								气浮池
							</div>
						</div>
					</div>
				</div>
				<div class="bg" style="height: 260px;position: relative;width: 610px;">
					<div style="text-align: center;">
						2#投加泵
					</div>
					<div style="display: flex;padding: 20px 10px;">
						<div style="display: flex;width: 260px;justify-content: space-around;">
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东进水流量
									</div>
									<div class="bottom-section">
										{{latestPamRecord.FIT103_2_5_H||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西进水流量
									</div>
									<div class="bottom-section">
										{{latestPamRecord.FIT103_1_5_H||'--'}}
									</div>
								</div>

								<div class="box">
									<div class="top-section">
										出水流量
									</div>
									<div class="bottom-section">
										{{latestPamRecord.CS_LJ_FIT_H||'--'}}
									</div>
								</div>

							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东二SS
									</div>
									<div class="bottom-section">
										{{latestPamRecord.Y104_2SS1_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西二SS
									</div>
									<div class="bottom-section">
										{{latestPamRecord.Y104_1SS1_V_PV||'--'}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										气浮SS
									</div>
									<div class="bottom-section">
										{{latestPamRecord.Y105_SS_V_PV||'--'}}
									</div>
								</div>
							</div>

							<div
								style="position: absolute;bottom: 10px;font-size: 12px;color: #007bff;text-align: center;">
								<div>算法建议</div>
								<div style="color: #FFF;height: 20px;">
									{{Number(latestPamRecord.Ai_2_PAM_DOSAGE_QF).toFixed(2)||'--'}}
								</div>
							</div>
						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon">
									泵图
								</div>
							</div>

						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon2">
									流量计
								</div>
								<div
									style="position: absolute;bottom: 70px;font-size: 12px;color: #007bff;text-align: center;">
									<div>当前数值</div>
									<div style="color: #FFF;height: 20px;">{{Number(latestPamRecord.ll2).toFixed(2)||'--'}}</div>
								</div>
							</div>
						</div>
						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuShuichi">
								气浮池
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="IconSetting" @click="handleClickSetting('pam')">

			</div>
			<div style="display: flex;margin-bottom: 30px;justify-content: space-between; width: 1250px;">
				<div class="bg" style="height: 260px;position: relative;width: 610px;">
					<div style="text-align: center;">
						3#投加泵
					</div>
					<div style="display: flex;padding: 20px 10px;">
						<div style="display: flex;width: 260px;justify-content: space-around;">
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东进水流量
									</div>
									<div class="bottom-section">
										{{latestPamRecord.FIT103_2_5_H||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西进水流量
									</div>
									<div class="bottom-section">
										{{latestPamRecord.FIT103_1_5_H||'--'}}
									</div>
								</div>

								<div class="box">
									<div class="top-section">
										出水流量
									</div>
									<div class="bottom-section">
										{{latestPamRecord.CS_LJ_FIT_H||'--'}}
									</div>
								</div>

							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东二SS
									</div>
									<div class="bottom-section">
										{{latestPamRecord.Y104_2SS1_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西二SS
									</div>
									<div class="bottom-section">
										{{latestPamRecord.Y104_1SS1_V_PV||'--'}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										气浮SS
									</div>
									<div class="bottom-section">
										{{latestPamRecord.Y105_SS_V_PV||'--'}}
									</div>
								</div>
							</div>

							<div
								style="position: absolute;bottom: 10px;font-size: 12px;color: #007bff;text-align: center;">
								<div>算法建议</div>
								<div style="color: #FFF;height: 20px;">
									{{Number(latestPamRecord.Ai_3_PAM_DOSAGE_QF).toFixed(2)||'--'}}
								</div>
							</div>
						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon">
									泵图
								</div>
							</div>

						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon2">
									流量计
								</div>
								<div
									style="position: absolute;bottom: 70px;font-size: 12px;color: #007bff;text-align: center;">
									<div>当前数值</div>
									<div style="color: #FFF;height: 20px;">{{Number(latestPamRecord.ll3).toFixed(2)||'--'}}</div>
								</div>
							</div>
						</div>
						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuShuichi">
								气浮池
							</div>
						</div>
					</div>
				</div>
				<div class="bg" style="height: 260px;position: relative;width: 610px;">
					<div style="text-align: center;">
						4#投加泵
					</div>
					<div style="display: flex;padding: 20px 10px;">
						<div style="display: flex;width: 260px;justify-content: space-around;">
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东进水流量
									</div>
									<div class="bottom-section">
										{{latestPamRecord.FIT103_2_5_H||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西进水流量
									</div>
									<div class="bottom-section">
										{{latestPamRecord.FIT103_1_5_H||'--'}}
									</div>
								</div>

								<div class="box">
									<div class="top-section">
										出水流量
									</div>
									<div class="bottom-section">
										{{latestPamRecord.CS_LJ_FIT_H||'--'}}
									</div>
								</div>

							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										东二SS
									</div>
									<div class="bottom-section">
										{{latestPamRecord.Y104_2SS1_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										西二SS
									</div>
									<div class="bottom-section">
										{{latestPamRecord.Y104_1SS1_V_PV||'--'}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										气浮SS
									</div>
									<div class="bottom-section">
										{{latestPamRecord.Y105_SS_V_PV||'--'}}
									</div>
								</div>
							</div>

							<div
								style="position: absolute;bottom: 10px;font-size: 12px;color: #007bff;text-align: center;">
								<div>算法建议</div>
								<div style="color: #FFF;height: 20px;">
									{{Number(latestPamRecord.Ai_4_PAM_DOSAGE_QF).toFixed(2)||'--'}}
								</div>
							</div>
						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon">
									泵图
								</div>
							</div>

						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon2">
									流量计
								</div>
								<div
									style="position: absolute;bottom: 70px;font-size: 12px;color: #007bff;text-align: center;">
									<div>当前数值</div>
									<div style="color: #FFF;height: 20px;">{{Number(latestPamRecord.ll4).toFixed(2)||'--'}}</div>
								</div>
							</div>
						</div>
						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuShuichi">
								气浮池
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div v-show="reportCata=='ty'">
			<div style="display: flex;margin-bottom: 30px;justify-content: space-between; width: 1250px;">
				<div class="bg" style="height: 260px;position: relative;width: 610px;">
					<div style="text-align: center;">
						东1#生化池
					</div>
					<div style="display: flex;padding: 20px 10px;">
						<div style="display: flex;width: 260px;justify-content: space-around;">
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										PH
									</div>
									<div class="bottom-section">
										{{latestTyRecord.IN_PH_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										COD
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.IN_COD_V_PV && latestTyRecord.Y107_COD_V_PV)? ((parseFloat(latestTyRecord.IN_COD_V_PV) + parseFloat(latestTyRecord.Y107_COD_V_PV)) / 2).toFixed(2): (latestTyRecord.IN_COD_V_PV ? parseFloat(latestTyRecord.IN_COD_V_PV).toFixed(2): (latestTyRecord.Y107_COD_V_PV ? parseFloat(latestTyRecord.Y107_COD_V_PV).toFixed(2): '--'))}}
									</div>
								</div>

								<div class="box">
									<div class="top-section">
										TN
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.IN_TN_V_PV && latestTyRecord.Y107_TN_V_PV)? ((parseFloat(latestTyRecord.IN_TN_V_PV) + parseFloat(latestTyRecord.Y107_TN_V_PV)) / 2).toFixed(2): (latestTyRecord.IN_TN_V_PV ? parseFloat(latestTyRecord.IN_TN_V_PV).toFixed(2): (latestTyRecord.Y107_TN_V_PV ? parseFloat(latestTyRecord.Y107_TN_V_PV).toFixed(2): '--'))}}
									</div>
								</div>

							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										进出水流量
									</div>
									<div class="bottom-section">
										{{([parseFloat(latestTyRecord.FIT103_2_5_H),parseFloat(latestTyRecord.FIT103_1_5_H),parseFloat(latestTyRecord.CS_LJ_FIT_H)].filter(value => !isNaN(value)).reduce((sum, value) => sum + value, 0) / Math.max([latestTyRecord.FIT103_2_5_H,latestTyRecord.FIT103_1_5_H,latestTyRecord.CS_LJ_FIT_H].filter(Boolean).length, 1)).toFixed(2) || '--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										生化池温度
									</div>
									<div class="bottom-section">
										{{latestTyRecord.T103_2_2_PV||'--'}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										ORP
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.Y103_2ORP3_V_PV && latestTyRecord.Y103_2ORP4_V_PV)? ((parseFloat(latestTyRecord.Y103_2ORP3_V_PV) + parseFloat(latestTyRecord.Y103_2ORP4_V_PV)) / 2).toFixed(2): (latestTyRecord.Y103_2ORP3_V_PV ? parseFloat(latestTyRecord.Y103_2ORP3_V_PV).toFixed(2): (latestTyRecord.Y103_2ORP4_V_PV ? parseFloat(latestTyRecord.Y103_2ORP4_V_PV).toFixed(2): '--'))}}
									</div>
								</div>


							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										MLSS
									</div>
									<div class="bottom-section">
										{{latestTyRecord.Y103_2MLSS2_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										DO
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.Y103_2DO6_V_PV && latestTyRecord.Y103_2DO7_V_PV)? ((parseFloat(latestTyRecord.Y103_2DO6_V_PV) + parseFloat(latestTyRecord.Y103_2DO7_V_PV)) / 2).toFixed(2): (latestTyRecord.Y103_2DO6_V_PV ? parseFloat(latestTyRecord.Y103_2DO6_V_PV).toFixed(2): (latestTyRecord.Y103_2DO7_V_PV ? parseFloat(latestTyRecord.Y103_2DO7_V_PV).toFixed(2): '--'))}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										NO3-N
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.Y103_2NO3_3_V_PV && latestTyRecord.Y103_2NO3_4_V_PV)? ((parseFloat(latestTyRecord.Y103_2NO3_3_V_PV) + parseFloat(latestTyRecord.Y103_2NO3_4_V_PV)) / 2).toFixed(2): (latestTyRecord.Y103_2NO3_3_V_PV ? parseFloat(latestTyRecord.Y103_2NO3_3_V_PV).toFixed(2): (latestTyRecord.Y103_2NO3_4_V_PV ? parseFloat(latestTyRecord.Y103_2NO3_4_V_PV).toFixed(2): '--'))}}
									</div>
								</div>

							</div>

							<div
								style="position: absolute;bottom: 10px;font-size: 12px;color: #007bff;text-align: center;">
								<div>算法建议</div>
								<div style="color: #FFF;">
									{{Number(latestTyRecord.Ai_RG_JY_TY_D_1).toFixed(2)||'--'}}
								</div>
							</div>
						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon">
									泵图
								</div>
							</div>

						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon2">
									流量计
								</div>
								<div
									style="position: absolute;bottom: 70px;font-size: 12px;color: #007bff;text-align: center;">
									<div>当前数值</div>
									<div style="color: #FFF;">--</div>
								</div>
							</div>
						</div>
						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuShuichi">
								东1#生化池
							</div>
						</div>
					</div>
				</div>
				<div class="bg" style="height: 260px;position: relative;width: 610px;">
					<div style="text-align: center;">
						东2#生化池
					</div>
					<div style="display: flex;padding: 20px 10px;">
						<div style="display: flex;width: 260px;justify-content: space-around;">
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										PH
									</div>
									<div class="bottom-section">
										{{latestTyRecord.IN_PH_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										COD
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.IN_COD_V_PV && latestTyRecord.Y107_COD_V_PV)? ((parseFloat(latestTyRecord.IN_COD_V_PV) + parseFloat(latestTyRecord.Y107_COD_V_PV)) / 2).toFixed(2): (latestTyRecord.IN_COD_V_PV ? parseFloat(latestTyRecord.IN_COD_V_PV).toFixed(2): (latestTyRecord.Y107_COD_V_PV ? parseFloat(latestTyRecord.Y107_COD_V_PV).toFixed(2): '--'))}}
									</div>
								</div>

								<div class="box">
									<div class="top-section">
										TN
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.IN_TN_V_PV && latestTyRecord.Y107_TN_V_PV)? ((parseFloat(latestTyRecord.IN_TN_V_PV) + parseFloat(latestTyRecord.Y107_TN_V_PV)) / 2).toFixed(2): (latestTyRecord.IN_TN_V_PV ? parseFloat(latestTyRecord.IN_TN_V_PV).toFixed(2): (latestTyRecord.Y107_TN_V_PV ? parseFloat(latestTyRecord.Y107_TN_V_PV).toFixed(2): '--'))}}
									</div>
								</div>

							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										进出水流量
									</div>
									<div class="bottom-section">
										{{([parseFloat(latestTyRecord.FIT103_2_5_H),parseFloat(latestTyRecord.FIT103_1_5_H),parseFloat(latestTyRecord.CS_LJ_FIT_H)].filter(value => !isNaN(value)).reduce((sum, value) => sum + value, 0) / Math.max([latestTyRecord.FIT103_2_5_H,latestTyRecord.FIT103_1_5_H,latestTyRecord.CS_LJ_FIT_H].filter(Boolean).length, 1)).toFixed(2) || '--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										生化池温度
									</div>
									<div class="bottom-section">
										{{latestTyRecord.T103_2_1_PV||'--'}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										ORP
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.Y103_2ORP1_V_PV && latestTyRecord.Y103_2ORP2_V_PV)? ((parseFloat(latestTyRecord.Y103_2ORP1_V_PV) + parseFloat(latestTyRecord.Y103_2ORP2_V_PV)) / 2).toFixed(2): (latestTyRecord.Y103_2ORP1_V_PV ? parseFloat(latestTyRecord.Y103_2ORP1_V_PV).toFixed(2): (latestTyRecord.Y103_2ORP2_V_PV ? parseFloat(latestTyRecord.Y103_2ORP2_V_PV).toFixed(2): '--'))}}
									</div>
								</div>


							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										MLSS
									</div>
									<div class="bottom-section">
										{{latestTyRecord.Y103_2MLSS2_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										DO
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.Y103_2DO2_V_PV && latestTyRecord.Y103_2DO3_V_PV)? ((parseFloat(latestTyRecord.Y103_2DO2_V_PV) + parseFloat(latestTyRecord.Y103_2DO3_V_PV)) / 2).toFixed(2): (latestTyRecord.Y103_2DO2_V_PV ? parseFloat(latestTyRecord.Y103_2DO2_V_PV).toFixed(2): (latestTyRecord.Y103_2DO3_V_PV ? parseFloat(latestTyRecord.Y103_2DO3_V_PV).toFixed(2): '--'))}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										NO3-N
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.Y103_2NO3_1_V_PV && latestTyRecord.Y103_2NO3_2_V_PV)? ((parseFloat(latestTyRecord.Y103_2NO3_1_V_PV) + parseFloat(latestTyRecord.Y103_2NO3_2_V_PV)) / 2).toFixed(2): (latestTyRecord.Y103_2NO3_1_V_PV ? parseFloat(latestTyRecord.Y103_2NO3_1_V_PV).toFixed(2): (latestTyRecord.Y103_2NO3_2_V_PV ? parseFloat(latestTyRecord.Y103_2NO3_2_V_PV).toFixed(2): '--'))}}
									</div>
								</div>

							</div>

							<div
								style="position: absolute;bottom: 10px;font-size: 12px;color: #007bff;text-align: center;">
								<div>算法建议</div>
								<div style="color: #FFF;">
									{{Number(latestTyRecord.Ai_RG_JY_TY_D_2).toFixed(2)||'--'}}
								</div>
							</div>
						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon">
									泵图
								</div>
							</div>

						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon2">
									流量计
								</div>
								<div
									style="position: absolute;bottom: 70px;font-size: 12px;color: #007bff;text-align: center;">
									<div>当前数值</div>
									<div style="color: #FFF;">--</div>
								</div>
							</div>
						</div>
						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuShuichi">
								东2#生化池
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="IconSetting" @click="handleClickSetting('ty')">

			</div>
			<div style="display: flex;margin-bottom: 30px;justify-content: space-between; width: 1250px;">
				<div class="bg" style="height: 260px;position: relative;width: 610px;">
					<div style="text-align: center;">
						西1#生化池
					</div>
					<div style="display: flex;padding: 20px 10px;">
						<div style="display: flex;width: 260px;justify-content: space-around;">
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										PH
									</div>
									<div class="bottom-section">
										{{latestTyRecord.IN_PH_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										COD
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.IN_COD_V_PV && latestTyRecord.Y107_COD_V_PV)? ((parseFloat(latestTyRecord.IN_COD_V_PV) + parseFloat(latestTyRecord.Y107_COD_V_PV)) / 2).toFixed(2): (latestTyRecord.IN_COD_V_PV ? parseFloat(latestTyRecord.IN_COD_V_PV).toFixed(2): (latestTyRecord.Y107_COD_V_PV ? parseFloat(latestTyRecord.Y107_COD_V_PV).toFixed(2): '--'))}}
									</div>
								</div>

								<div class="box">
									<div class="top-section">
										TN
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.IN_TN_V_PV && latestTyRecord.Y107_TN_V_PV)? ((parseFloat(latestTyRecord.IN_TN_V_PV) + parseFloat(latestTyRecord.Y107_TN_V_PV)) / 2).toFixed(2): (latestTyRecord.IN_TN_V_PV ? parseFloat(latestTyRecord.IN_TN_V_PV).toFixed(2): (latestTyRecord.Y107_TN_V_PV ? parseFloat(latestTyRecord.Y107_TN_V_PV).toFixed(2): '--'))}}
									</div>
								</div>

							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										进出水流量
									</div>
									<div class="bottom-section">
										{{([parseFloat(latestTyRecord.FIT103_2_5_H),parseFloat(latestTyRecord.FIT103_1_5_H),parseFloat(latestTyRecord.CS_LJ_FIT_H)].filter(value => !isNaN(value)).reduce((sum, value) => sum + value, 0) / Math.max([latestTyRecord.FIT103_2_5_H,latestTyRecord.FIT103_1_5_H,latestTyRecord.CS_LJ_FIT_H].filter(Boolean).length, 1)).toFixed(2) || '--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										生化池温度
									</div>
									<div class="bottom-section">
										{{latestTyRecord.T103_1_2_PV||'--'}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										ORP
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.Y103_1ORP3_V_PV && latestTyRecord.Y103_1ORP4_V_PV)? ((parseFloat(latestTyRecord.Y103_1ORP3_V_PV) + parseFloat(latestTyRecord.Y103_1ORP4_V_PV)) / 2).toFixed(2): (latestTyRecord.Y103_1ORP3_V_PV ? parseFloat(latestTyRecord.Y103_1ORP3_V_PV).toFixed(2): (latestTyRecord.Y103_1ORP4_V_PV ? parseFloat(latestTyRecord.Y103_1ORP4_V_PV).toFixed(2): '--'))}}
									</div>
								</div>


							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										MLSS
									</div>
									<div class="bottom-section">
										{{latestTyRecord.Y103_1MLSS2_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										DO
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.Y103_1DO6_V_PV && latestTyRecord.Y103_1DO7_V_PV)? ((parseFloat(latestTyRecord.Y103_1DO6_V_PV) + parseFloat(latestTyRecord.Y103_1DO7_V_PV)) / 2).toFixed(2): (latestTyRecord.Y103_1DO6_V_PV ? parseFloat(latestTyRecord.Y103_1DO6_V_PV).toFixed(2): (latestTyRecord.Y103_1DO7_V_PV ? parseFloat(latestTyRecord.Y103_1DO7_V_PV).toFixed(2): '--'))}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										NO3-N
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.Y103_1NO3_3_V_PV && latestTyRecord.Y103_1NO3_4_V_PV)? ((parseFloat(latestTyRecord.Y103_1NO3_3_V_PV) + parseFloat(latestTyRecord.Y103_1NO3_4_V_PV)) / 2).toFixed(2): (latestTyRecord.Y103_1NO3_3_V_PV ? parseFloat(latestTyRecord.Y103_1NO3_3_V_PV).toFixed(2): (latestTyRecord.Y103_1NO3_4_V_PV ? parseFloat(latestTyRecord.Y103_1NO3_4_V_PV).toFixed(2): '--'))}}
									</div>
								</div>

							</div>

							<div
								style="position: absolute;bottom: 10px;font-size: 12px;color: #007bff;text-align: center;">
								<div>算法建议</div>
								<div style="color: #FFF;">
									{{Number(latestTyRecord.Ai_RG_JY_TY_D_3).toFixed(2)||'--'}}
								</div>
							</div>
						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon">
									泵图
								</div>
							</div>


						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon2">
									流量计
								</div>
								<div
									style="position: absolute;bottom: 70px;font-size: 12px;color: #007bff;text-align: center;">
									<div>当前数值</div>
									<div style="color: #FFF;">--</div>
								</div>
							</div>
						</div>
						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuShuichi">
								西1#生化池
							</div>
						</div>
					</div>
				</div>
				<div class="bg" style="height: 260px;position: relative;width: 610px;">
					<div style="text-align: center;">
						东2#生化池
					</div>
					<div style="display: flex;padding: 20px 10px;">
						<div style="display: flex;width: 260px;justify-content: space-around;">
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										PH
									</div>
									<div class="bottom-section">
										{{latestTyRecord.IN_PH_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										COD
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.IN_COD_V_PV && latestTyRecord.Y107_COD_V_PV)? ((parseFloat(latestTyRecord.IN_COD_V_PV) + parseFloat(latestTyRecord.Y107_COD_V_PV)) / 2).toFixed(2): (latestTyRecord.IN_COD_V_PV ? parseFloat(latestTyRecord.IN_COD_V_PV).toFixed(2): (latestTyRecord.Y107_COD_V_PV ? parseFloat(latestTyRecord.Y107_COD_V_PV).toFixed(2): '--'))}}
									</div>
								</div>

								<div class="box">
									<div class="top-section">
										TN
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.IN_TN_V_PV && latestTyRecord.Y107_TN_V_PV)? ((parseFloat(latestTyRecord.IN_TN_V_PV) + parseFloat(latestTyRecord.Y107_TN_V_PV)) / 2).toFixed(2): (latestTyRecord.IN_TN_V_PV ? parseFloat(latestTyRecord.IN_TN_V_PV).toFixed(2): (latestTyRecord.Y107_TN_V_PV ? parseFloat(latestTyRecord.Y107_TN_V_PV).toFixed(2): '--'))}}
									</div>
								</div>

							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										进出水流量
									</div>
									<div class="bottom-section">
										{{([parseFloat(latestTyRecord.FIT103_2_5_H),parseFloat(latestTyRecord.FIT103_1_5_H),parseFloat(latestTyRecord.CS_LJ_FIT_H)].filter(value => !isNaN(value)).reduce((sum, value) => sum + value, 0) / Math.max([latestTyRecord.FIT103_2_5_H,latestTyRecord.FIT103_1_5_H,latestTyRecord.CS_LJ_FIT_H].filter(Boolean).length, 1)).toFixed(2) || '--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										生化池温度
									</div>
									<div class="bottom-section">
										{{latestTyRecord.T103_1_1_PV||'--'}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										ORP
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.Y103_1ORP1_V_PV && latestTyRecord.Y103_1ORP2_V_PV)? ((parseFloat(latestTyRecord.Y103_1ORP1_V_PV) + parseFloat(latestTyRecord.Y103_1ORP2_V_PV)) / 2).toFixed(2): (latestTyRecord.Y103_1ORP1_V_PV ? parseFloat(latestTyRecord.Y103_1ORP1_V_PV).toFixed(2): (latestTyRecord.Y103_1ORP2_V_PV ? parseFloat(latestTyRecord.Y103_1ORP2_V_PV).toFixed(2): '--'))}}
									</div>
								</div>


							</div>
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										MLSS
									</div>
									<div class="bottom-section">
										{{latestTyRecord.Y103_1MLSS1_V_PV||'--'}}
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										DO
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.Y103_1DO2_V_PV && latestTyRecord.Y103_1DO3_V_PV)? ((parseFloat(latestTyRecord.Y103_1DO2_V_PV) + parseFloat(latestTyRecord.Y103_1DO3_V_PV)) / 2).toFixed(2): (latestTyRecord.Y103_1DO2_V_PV ? parseFloat(latestTyRecord.Y103_1DO2_V_PV).toFixed(2): (latestTyRecord.Y103_1DO3_V_PV ? parseFloat(latestTyRecord.Y103_1DO3_V_PV).toFixed(2): '--'))}}
									</div>
								</div>
								<div class="box">
									<div class="top-section">
										NO3-N
									</div>
									<div class="bottom-section">
										{{ (latestTyRecord.Y103_1NO3_1_V_PV && latestTyRecord.Y103_1NO3_2_V_PV)? ((parseFloat(latestTyRecord.Y103_1NO3_1_V_PV) + parseFloat(latestTyRecord.Y103_1NO3_2_V_PV)) / 2).toFixed(2): (latestTyRecord.Y103_1NO3_1_V_PV ? parseFloat(latestTyRecord.Y103_1NO3_1_V_PV).toFixed(2): (latestTyRecord.Y103_1NO3_2_V_PV ? parseFloat(latestTyRecord.Y103_1NO3_2_V_PV).toFixed(2): '--'))}}
									</div>
								</div>

							</div>

							<div
								style="position: absolute;bottom: 10px;font-size: 12px;color: #007bff;text-align: center;">
								<div>算法建议</div>
								<div style="color: #FFF;">
									{{Number(latestTyRecord.Ai_RG_JY_TY_D_4).toFixed(2)||'--'}}
								</div>
							</div>
						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon">
									泵图
								</div>
							</div>

						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div>
								<div class="zhuIcon2">
									流量计
								</div>
								<div
									style="position: absolute;bottom: 70px;font-size: 12px;color: #007bff;text-align: center;">
									<div>当前数值</div>
									<div style="color: #FFF;">--</div>
								</div>
							</div>
						</div>
						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuShuichi">
								西2#生化池
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-show="reportCata=='hl'">
			<div style="display: flex;margin-bottom: 30px;justify-content: space-between; width: 1250px;">
				<div class="bg" style="height: 550px;position: relative;width: 610px;">
					<div style="text-align: center;">
						内回流
					</div>
					<div style="display: flex;padding: 20px 10px;">
						<div style="display: flex;width: 130px;justify-content: space-around;">
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										参数1
									</div>
									<div class="bottom-section">
										--
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										参数1
									</div>
									<div class="bottom-section">
										--
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										参数1
									</div>
									<div class="bottom-section">
										--
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										参数1
									</div>
									<div class="bottom-section">
										--
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										参数1
									</div>
									<div class="bottom-section">
										--
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										参数1
									</div>
									<div class="bottom-section">
										--
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										参数1
									</div>
									<div class="bottom-section">
										--
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										参数1
									</div>
									<div class="bottom-section">
										--
									</div>
								</div>
							</div>
						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuIcon">
								泵图
							</div>
						</div>
						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuIcon">
								泵图
							</div>
						</div>
						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuIcon">
								流量计
							</div>
						</div>
						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuShuichi">
								生化池
							</div>
						</div>
					</div>
				</div>
				<div class="bg" style="height: 550px;position: relative;width: 610px;">
					<div style="text-align: center;">
						外回流
					</div>
					<div style="display: flex;padding: 20px 10px;">
						<div style="display: flex;width: 130px;justify-content: space-around;">
							<div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										参数1
									</div>
									<div class="bottom-section">
										--
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										参数1
									</div>
									<div class="bottom-section">
										--
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										参数1
									</div>
									<div class="bottom-section">
										--
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										参数1
									</div>
									<div class="bottom-section">
										--
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										参数1
									</div>
									<div class="bottom-section">
										--
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										参数1
									</div>
									<div class="bottom-section">
										--
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										参数1
									</div>
									<div class="bottom-section">
										--
									</div>
								</div>
								<div class="box" style="margin-bottom: 15px;">
									<div class="top-section">
										参数1
									</div>
									<div class="bottom-section">
										--
									</div>
								</div>
							</div>
						</div>

						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuIcon">
								泵图
							</div>
						</div>
						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuIcon">
								泵图
							</div>
						</div>
						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuIcon">
								流量计
							</div>
						</div>
						<div class="iconContainer">
							<svg width="30" height="50">
								<line x1="5" y1="25" x2="55" y2="25" stroke="blue" stroke-width="2" />
							</svg>
							<div class="zhuShuichi">
								生化池
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%">
			<div style="height: 600px;">
				<div style="color: #FFF;font-size: 18px;position: absolute;top: 50px;left: 45%;">当前建议值：10</div>
				<!-- </el-descriptions> -->
				<el-descriptions title="">
					<!-- <el-descriptions title="" > -->
					<!-- <el-descriptions-item label="当前建议"> 10</el-descriptions-item> -->
					<el-descriptions-item label="使用模型"> sl-model20154.rf</el-descriptions-item>
					<el-descriptions-item label="生成时间">2025-03-04 12:00:00</el-descriptions-item>
				</el-descriptions>
				<div class="bg" style="height: 300px;">
					<DialogChart1 :cdata="cdata1" />
				</div>
				<div style="display: flex;justify-content: space-between;margin-top: 20px;">
					<div class="bg" style="height: 250px;width: 49%;">
						<DialogChart2 :cdata="cdata1" />
					</div>
					<div class="bg" style="height: 250px;width: 49%;">
						<DialogChart3 :cdata="cdata1" />
					</div>
				</div>
			</div>
		</el-dialog>

		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible1" width="60%" center>
			<el-form ref="form" :model="formData" label-width="160px">
				<el-form-item label="投加量">
					<el-input v-model="formData['pac:state:lastDose']"></el-input>
				</el-form-item>
				<el-form-item label="盐差浓度线">
					<el-input v-model="formData.medPacPoMid"></el-input>
				</el-form-item>
				<el-form-item label="PO43-最小浓度门槛">
					<el-input v-model="formData.medPacSaltLine"></el-input>
				</el-form-item>
				<el-form-item label="气浮浓度">
					<el-input v-model="formData.medPacQfLine"></el-input>
				</el-form-item>
				<el-form-item label="比例P">
					<el-input v-model="formData.medPacProportional"></el-input>
				</el-form-item>
				<el-form-item label="积分I">
					<el-input v-model="formData.medPacIntegral"></el-input>
				</el-form-item>
				<el-form-item label="微分D">
					<el-input v-model="formData.medPacDerivative"></el-input>
				</el-form-item>
				<el-form-item label="气浮权重">
					<el-input v-model="formData.medPacPowerQf"></el-input>
				</el-form-item>
				<el-form-item label="水量权重">
					<el-input v-model="formData.medPacPowerWater"></el-input>
				</el-form-item>
				<el-form-item label="盐差权重">
					<el-input v-model="formData.medPacPowerPo"></el-input>
				</el-form-item>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="setMedParam('pac')">提 交</el-button>
			</span>
		</el-dialog>

		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible2" width="60%" center>
			<el-form ref="form" :model="formData" label-width="120px">
				<el-form-item label="投加量">
					<el-input v-model="formData['pam:state:lastDose']"></el-input>
				</el-form-item>
				<el-form-item label="SS浓度线">
					<el-input v-model="formData.medPamSSMid"></el-input>
				</el-form-item>
				<el-form-item label="SS最小浓度门槛">
					<el-input v-model="formData.medPamSSLine"></el-input>
				</el-form-item>
				<el-form-item label="气浮浓度">
					<el-input v-model="formData.medPamQfLine"></el-input>
				</el-form-item>
				<el-form-item label="比例P">
					<el-input v-model="formData.medPamProportional"></el-input>
				</el-form-item>
				<el-form-item label="积分I">
					<el-input v-model="formData.medPamIntegral"></el-input>
				</el-form-item>
				<el-form-item label="微分D">
					<el-input v-model="formData.medPamDerivative"></el-input>
				</el-form-item>
				<el-form-item label="气浮权重">
					<el-input v-model="formData.medPamPowerQf"></el-input>
				</el-form-item>
				<el-form-item label="水量权重">
					<el-input v-model="formData.medPamPowerWater"></el-input>
				</el-form-item>
				<el-form-item label="SS权重">
					<el-input v-model="formData.medPamPowerPo"></el-input>
				</el-form-item>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="setMedParam('pam')">提 交</el-button>
			</span>
		</el-dialog>

		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible3" width="60%" center>
			<el-form ref="form" :model="formData" label-width="120px">
				<el-form-item label="趋向值投加量">
					<el-input v-model="formData.baseDose"></el-input>
				</el-form-item>
				<el-form-item label="趋向值">
					<el-input v-model="formData.medTyMid"></el-input>
				</el-form-item>
				<el-form-item label="趋向低于临界值">
					<el-input v-model="formData.medTyLine"></el-input>
				</el-form-item>
				<el-form-item label="COD转化值">
					<el-input v-model="formData.medTyCod"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="setMedParam('ty')">提 交</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import DialogChart1 from './dialogChart1.vue'
	import DialogChart2 from './dialogChart2.vue'
	import DialogChart3 from './dialogChart3.vue'
	export default {
		components: {
			DialogChart1,
			DialogChart2,
			DialogChart3
		},
		props: {
			reportCata: {
				type: String,
				default: () => ("")
			},
		},
		mounted() {
			this.loadFunc()
			// this.getSystemInfo()
			// this.timer1 = setInterval(this.loadFunc, 2 * 60 * 1000);
			this.timer1 = setInterval(this.loadFunc, 2* 60  * 1000);
			// this.timer2 = setInterval(this.getSystemInfo, 1 * 60 * 1000);
		},
		beforeDestroy() {
			clearInterval(this.timer1);
			// clearInterval(this.timer2);
		},
		data() {
			return {
				timer1: null,
				// timer2: null,
				dialogVisible: false,
				dialogVisible1: false,
				dialogVisible2: false,
				dialogVisible3: false,
				dialogTitle: '',
				formData: {},
				url: {
					getLatestPacRecord: '/api/report/analysis/getLatestPacRecord',
					getLatestPamRecord: '/api/report/analysis/getLatestPamRecord',
					getLatestTyRecord: '/api/report/analysis/getLatestTyRecord',
					getMedParam: '/api/report/analysis/med/redisGet',
					setMedParam: '/api/report/analysis/med/redisSave',
				},
				latestPacRecord: {},
				latestPamRecord: {},
				latestTyRecord: {},
				cdata1: {
					category: ['10:00', '10:10', '10:20', '10:30', '10:40', '10:50', '11:00', '11:10', '11:20', '11:30',
						'11:40', '11:50', '12:00'
					],
					lineData1: [
						1446.8,
						1391.83,
						1391.83,
						1450.35,
						1450.35,
						1378.97,
						1378.97,
						1417.54,
						1417.54,
						1399.36,
						1399.36,
						1454.34,
						1454.34
					],

					lineData2: [
						591.57,
						591.57,
						591.57,
						614.08,
						614.08,
						614.08,
						621.73,
						621.73,
						621.73,
						599.22,
						599.22,
						599.22,
						592.92
					],

					lineData3: [
						2454.86,
						2295.4,
						1871.48,
						1738.43,
						2167.44,
						2358.5,
						2280.16,
						2226.98,
						2411.38,
						1871.08,
						1143.57,
						1241.51,
						1872.79
					],

					lineData4: [
						23.1,
						23.1,
						21.3,
						21.9,
						27.15,
						27.15,
						27.15,
						28.35,
						28.35,
						28.35,
						28.95,
						31.2,
						25.95
					],

					lineData5: [
						11.85,
						11.85,
						11.85,
						11.85,
						11.85,
						11.85,
						11.85,
						11.85,
						11.85,
						11.85,
						11.85,
						11.85,
						11.85
					],

					lineData6: [
						3.59,
						3.82,
						4.16,
						3.23,
						3.65,
						3.35,
						3.63,
						3.17,
						3.59,
						3.51,
						3.45,
						3.74,
						3.9
					],
				}
			};
		},
		methods: {
			loadFunc() {
				this.getLatestPacRecord()
				this.getLatestPamRecord()
				this.getLatestTyRecord()
			},
			getLatestPacRecord() {
				var _this = this
				this.$ajax({
					method: 'get',
					url: this.url.getLatestPacRecord
				}).then(function(resultData) {
					var resData = resultData.data.data
					if (resData.list.length > 0) {
						_this.latestPacRecord = resData.list[0]
						_this.$set(_this.latestPacRecord,'ll1',resData.ll1)
						_this.$set(_this.latestPacRecord,'ll2',resData.ll2)
						_this.$set(_this.latestPacRecord,'ll3',resData.ll3)
						_this.$set(_this.latestPacRecord,'ll4',resData.ll4)
					}

				})
			},
			getLatestPamRecord() {
				var _this = this
				this.$ajax({
					method: 'get',
					url: this.url.getLatestPamRecord
				}).then(function(resultData) {
					var resData = resultData.data.data
					if (resData.list.length > 0) {
						_this.latestPamRecord = resData.list[0]
						_this.$set(_this.latestPamRecord,'ll1',resData.ll1)
						_this.$set(_this.latestPamRecord,'ll2',resData.ll2)
						_this.$set(_this.latestPamRecord,'ll3',resData.ll3)
						_this.$set(_this.latestPamRecord,'ll4',resData.ll4)
					}

				})
			},
			getLatestTyRecord() {
				var _this = this
				this.$ajax({
					method: 'get',
					url: this.url.getLatestTyRecord
				}).then(function(resultData) {
					var resData = resultData.data.data
					if (resData.list.length > 0) {
						_this.latestTyRecord = resData.list[0]
					}

				})
			},
			handleClick(type, num) {
				switch (type) {
					case 'pam':
						this.dialogTitle = num + "#投加泵"
				}
				this.dialogVisible = true
			},

			handleClickSetting(type) {
				//获取参数
				var _this = this
				this.$ajax({
					method: 'get',
					url: this.url.getMedParam
				}).then(function(resultData) {
					var resData = resultData.data.data
					_this.formData = resData

				})
				switch (type) {
					case 'pac':
						_this.dialogTitle = "PAC加药参数设置"
						_this.dialogVisible1 = true
						break
					case 'pam':
						_this.dialogTitle = "PAM设置"
						_this.dialogVisible2 = true
						break
					case 'ty':
						_this.dialogTitle = "碳源设置"
						_this.dialogVisible3 = true
						break
				}


			},
			setMedParam(type) {
				var _this = this
				this.$ajax({
					method: 'post',
					url: this.url.setMedParam + "?type=" + type,
					params: _this.formData
				}).then(function() {
					_this.dialogVisible1 = false
					_this.dialogVisible2 = false
					_this.dialogVisible3 = false
					// var resData = resultData.data.data
					// if (resData.list.length > 0) {
					// 	_this.latestPamRecord = resData.list[0]
					// }

				})
			},
		}
	}
</script>

<style scoped>
	.iconContainer {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.zhuIcon {
		background-image: url(../../assets/icon-beng.png);
		width: 48px;
		height: 48px;
		background-size: contain;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		font-size: 10px;
	}

	.zhuIcon2 {
		background-image: url(../../assets/icon-llj.png);
		width: 48px;
		height: 48px;
		background-size: contain;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		font-size: 10px;
	}

	.zhuShuichi {
		background-image: url(../../assets/icon-shuichi.png);
		width: 148px;
		height: 82px;
		background-size: contain;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		font-size: 10px;
	}

	/deep/.el-dialog {
		/* 背景颜色 */
		background-color: rgba(15, 23, 47, 0.9);
		/* 使用白色或其他浅色调 */

		/* 边框颜色 */
		border: 1px solid rgba(19, 49, 74, 0.9);
		/* 浅灰色边框
		*/

		/* 对话框标题栏颜色 */
		.el-dialog__header {
			/* 	background-color: rgba(4, 22, 58, 0.5); */
			/* color: #318cd4; */
			text-align: center;
		}

		.el-dialog__title {
			color: #FFF;
		}

		/* 对话框内容区域颜色 */
		.el-dialog__body {
			color: #318cd4;
			/* 深灰色文字 */
		}

		/* 对话框按钮区域颜色 */
		.el-dialog__footer {
			/* background-color: #f0f0f0; */
			/* 更轻的背景颜色 */
			color: #333333;
			/* 深灰色文字 */
		}

		/* 按钮样式 */
		/deep/.el-button {
			background-color: #007bff;
			/* 使用蓝色作为按钮背景 */
			color: #ffffff;
			/* 白色文字 */
			border: none;
		}

		/* 阴影效果 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

		.el-input__inner {
			background-color: transparent;
			background-color: #375e8861;
			/* background-color: #233735; */
			border: 1px solid #527375;
			color: rgba(6, 209, 219, 1);
		}

		.el-form-item__label {
			color: rgba(6, 209, 219, 1);
		}

		/* 减少阴影浓度 */
	}

	/deep/.el-descriptions {
		.el-descriptions__body {
			background-color: transparent;
			color: #fff;
		}
	}

	.box {
		width: 80px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border: 2px solid #007bff;

	}

	.top-section {
		background-color: #3b7dd4;
		color: white;
		/* padding: 0px; */
		font-size: 14px;
		/* font-weight: 600; */
		/* letter-spacing: 1px; */
		text-align: center;
	}

	.bottom-section {
		/* background-color: #d9d9d9; */
		/* color: #8CB1D6; */
		/* padding:  1px 2px; */
		font-size: 15px;
		height: 20px;
		text-align: center;
	}

	.IconSetting {
		background-image: url(../../assets/icon-setting.png);
		width: 40px;
		height: 40px;
		position: absolute;
		top: 255px;
		left: 605px;
		background-size: contain;
		cursor: pointer;
	}
</style>